<template>
    <div class="sky-detail">
        <div class="i-layout-page-header">
            <PageHeader hidden-breadcrumb>
                <div slot="title">
                    刘鸾英  13565658858
                <Poptip trigger="hover" placement="bottom" width="165">
               <span><Icon type="ios-albums-outline" class="ivu-mr-8" /></span>
            <List header="历史号码" slot="content">
            <ListItem>15656556658</ListItem>
            <ListItem>13856556658</ListItem>
            <ListItem>17956556658</ListItem>
        </List></Poptip> <Icon type="md-git-branch" />
                    <span class="sky-s1">女 26</span>
                    <tag>诊疗号:13256578</tag>
                    <Tag color="volcano">复诊</Tag>
                    <span class="sky-s2">创建时间:2019-07-16 16:03</span>
                </div>
             <div slot="action">
            <ButtonGroup>
                <Button>{{text}}</Button>
            </ButtonGroup>
            <Button type="primary" @click="handleOpenRemarks">备注</Button>
             <Button @click="handleOpenDrawer" type="primary">编辑</Button>
            <Button @click="handleReturnVisit" type="primary">回访</Button>
        </div>
                <div slot="content">
                    <DescriptionList :col="1">
                       <Description term="标签：">
                           <Tag closable>标签一</Tag>
                           <Tag closable>标签二</Tag>
    <Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
    <Button icon="ios-add" size="small" @click="handleAdd">添加标签</Button>
    </Description>
                    </DescriptionList>
                    <DescriptionList :col="4">
                        <Description term="所属医助：">高玲</Description>
                        <Description term="所属客服：">高玲</Description>
                        <Description term="到诊时间：">2019-07-16</Description>
                        <Description term="诊室：">3诊</Description>
                        <Description term="下次复诊日期：">2019-07-28</Description>
                        <Description term="回访次数：">3次</Description>
                        <Description term="下次回访时间：">2019-07-16</Description>
                        <Description term="居住城市：">合肥</Description>
                        <Description term="来院次数：">3</Description>
                        <Description term="消费金额：">3006</Description>
                        <Description term="病种：">白癜风</Description>
                        <Description term="诊疗评估：">住院</Description>
                        <Description term="风控类型：">领导介绍</Description>
                        <Description term="效果类型：">见效-10%</Description>
                        <Description term="奕远渠道：">微信</Description>
                        <Description term="住院次数:">2</Description>
                        <Description term="断诊次数：">3</Description>
                        </DescriptionList>
                        <DescriptionList :col="2">
                    <Description term="部位：">
                            <tag>头部</tag>
                            <tag>四肢</tag>
                        </Description>
                        <Description term="备注：">{{ value }}</Description>
                    </DescriptionList>
                    <DescriptionList :col="2">
                        <Description term="详细地址：">安徽省合肥市庐阳区</Description>
                    </DescriptionList>
                </div>
            </PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="i-table-no-border">
            <Tabs :animated="false">
                <TabPane label="用户足迹">
                    <Timeline class="ivu-pt-16">
                        <TimelineItem>
                            <p class="time">2019-10-21 11:59</p>
                            <p class="content">号码由【--】变更为【15956574518】</p>
                            <p class="consultant">
                                医助
                                <span class="c-inr">王语文</span>
                            </p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2019-10-18 11:59</p>
                            <p class="content">问我普查名额怎么申请 想过来看看</p>
                            <p class="consultant">
                                客服
                                <span class="c-inr">王语文</span>
                                <Badge status="processing" text="继续回访" />
                            </p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2019-10-16 11:59</p>
                            <p class="content">平时7点下班，也没有休息天，想过段时间再看，推了全免检查到31号，手机短信发地址， 一直说谢谢，希望比较小</p>
                            <p class="consultant">
                                医助
                                <span class="c-inr">王语文</span>
                                <Badge status="warning" text="未接通/未回复" />
                            </p>
                        </TimelineItem>
                        <TimelineItem>
                            <p class="time">2019-09-21 11:59</p>
                            <p class="content">问我普查名额怎么申请 想过来看看</p>
                            <p class="consultant">
                                客服
                                <span class="c-inr">王语文</span>
                                <Badge status="processing" text="继续回访" />
                            </p>
                        </TimelineItem>
                    </Timeline>
                </TabPane>
                <TabPane label="回访信息">
                    <returnVisit />
                </TabPane>
                <TabPane label="病历信息">
                    <Case />
                </TabPane>
                <TabPane label="治疗信息">
                    <Treatment />
                </TabPane>
                <TabPane label="消费信息">
                    <consume />
                </TabPane>
                <TabPane label="治疗图片">
                    <Images />
                </TabPane>
                <TabPane label="操作日志">
                    <Journal />
                </TabPane>
            </Tabs>
        </Card>
        <edit-patient ref="editPatient" />
        <Modal v-model="addTag"
            @on-ok="handleOk"
            @on-cancel="handleCancel"
            title="添加标签"
            :mask-closable="false"
            width="600"
        >
        <Form :label-width="100">
            <FormItem label="活动：" class="ivu-mb-8">
                <tag color="primary">援助活动</tag><tag>抗复发</tag><tag>援助活动</tag><tag>抗复发</tag><tag>援助活动</tag><tag color="primary">抗复发</tag><tag>援助活动</tag><tag>抗复发</tag>
            </FormItem>
             <FormItem label="优惠：" class="ivu-mb-8">
                <tag>援助活动</tag><tag>抗复发</tag>
            </FormItem>
        </Form>
        </Modal>
        <handleReturnVisit ref="handleReturnVisit" />
    </div>
</template>

<script>
    import handleReturnVisit from '@/components/returnVisit';
    import returnVisit from './returnVisit';
    import Case from './Case';
    import Treatment from './Treatment';
    import consume from './consume';
    import Images from './detailed-Images';
    import Journal from './Journal';
    import editPatient from '@/components/editPatient'
    export default {
        name: 'index',
        components: { returnVisit, handleReturnVisit, Case, Treatment, consume, Images, Journal, editPatient },
        data () {
            return {
                addTag: false,
                show: true,
                modal: false,
                loading: false,
                value: '',
                anit: '',
                text: '标为抗复发'
            }
        },
        methods: {
            handleCancel () {
                this.showUpdate = false;
            },
            handleOk () {
                this.showUpdate = false;
                this.$Message.success('添加成功');
            },
            handleOpenDrawer () {
                this.$refs.editPatient.handleOpenDrawer()
            },
            handleDrawer () {
                this.drawer = false;
                this.$Message.success('编辑成功');
            },

            handleReturnVisit () {
                this.$refs.handleReturnVisit.handleReturnVisit()
            },
            handleClose () {
                this.$Modal.confirm({
                    title: '标签删除确认',
                    content: '<p>是否确定删掉此标签</p>',
                    onOk: () => {
                        this.$Message.info('删除成功');
                        this.show = false;
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            },
            handleAdd () {
                this.addTag = true;
            },
            handleOpenRemarks () {
                this.$Modal.confirm({
                    width: 500,
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                type: 'textarea',
                                placeholder: '请输入备注内容'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                }
                            }
                        })
                    }
                })
            }
        }
    }
</script>
<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr {
    margin: 0 10px;
}
h4 span {
    margin-left: 5px;
}
.title {
    font-weight: bold;
    font-size: 16px;
    padding: 24px 0 0 24px;
}
.sky-screen {
    margin-top: 16px;
}
.sky-s1 {
    font-size: 14px;
    margin: 0 16px;
    color: #666;
}
.sky-s2 {
    font-size: 12px;
    margin-left: 16px;
    color: #888;
}
.sky-note {
    padding: 5px 0;
}
</style>
